<template>
  <div
    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
    class="pa-5"
    style="height: 520px; overflow-y: auto"
  >
    <avue-crud
      ref="crud"
      v-model="form"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :search.sync="searchForm"
      :page.sync="page"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @search-reset="onCustomSearchReset"
      @refresh-change="onRefresh"
      @selection-change="onSelectionChange"
      @filter-change="onFilterChange"
      @sort-change="onSortChange"
    >
      <template slot="dept" slot-scope="{ row }">
        <span>{{ row.dept && row.dept.deptName }}</span>
      </template>
      <template slot="roles" slot-scope="{ row }">
        <span>{{ row.roles && row.roles.length ? row.roles.map((item) => item.roleName).join(',') : '' }}</span>
      </template>
    </avue-crud>
  </div>
</template>
<script>
import { requestUserPage } from '@/api/system/user'
import ListMixin from '@/utils/mixins/list-mixin'
// import UserSelecter from '@/components/userSelecter'
import moment from 'moment'
const DEFAULT_LIST_MAP_FUNC = (item) => {
  const ret = item

  return ret
}
const DEFAULT_EDIT_MAP_FUNC = (item) => {
  const ret = item
  item.switching = false

  return ret
}

export default {
  name: 'Chart',
  mixins: [ListMixin],
  props: {
    selectList: {
      type: Array,
      default: () => [],
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      moment,
      listApi: this.list,
      listMapFunc: DEFAULT_LIST_MAP_FUNC,
      editMapFunc: DEFAULT_EDIT_MAP_FUNC,
      tableOption: {
        menu: false,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: true,
        header: false,
        // showHeader:false,
        index: true,
        // searchLabelWidth: 100,
        searchMenuPosition: 'left',

        column: [
          {
            label: '姓名',
            prop: 'nickName',
            search: true,
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '角色',
            prop: 'roles',
            align: 'left',
            overHidden: true,
            span: 12,
          },
          {
            label: '手机号',
            prop: 'phone',
            span: 12,
            align: 'left',
            overHidden: true,
            type: '',
          },
          {
            label: '部门',
            prop: 'dept',
            span: 12,
            align: 'left',
            overHidden: true,
          },
        ],
      },
      setting: false,
      // params: {},
    }
  },
  watch: {
    tableData: {
      handler: function (newval) {
        if (this.$refs.crud) {
          this.setSellection()
        }
      },
      // immediate:true
    },
    params: {
      handler: function (newval) {
        this.setting = true
        this.onSearchReset()
      },
    },
  },
  methods: {
    async list(params) {
      // delete params.matrixName
      let res = await requestUserPage({ ...params, ...this.params })
      return res
    },
    onSelectionChange(data) {
      if (this.setting) return
      let arr = this.tableData.map((item) => item.id)
      let list = this.selectList.filter((item) => !arr.includes(item.id))
      this.$emit('update:selectList', [...list, ...data])
    },
    setSellection() {
      this.setting = true
      let selectList = this.selectList.map((item) => item.id)
      let rows = this.tableData.filter((item) => selectList.includes(item.id))
      this.$refs.crud.clearSelection()
      this.$refs.crud.toggleSelection(rows)
      this.setting = false
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer__header {
    padding-top: 10px;
    margin-bottom: 10px;
  }

  .el-drawer .avue-form {
    padding-top: 0;
  }
}

.status-tag {
  width: 83px;
  height: 24px;
  line-height: 22px;
  border-radius: 12px;
  display: inline-block;
  text-align: center;
}

::v-deep {
  .el-col-md-6 {
    width: 50%;
  }
}
</style>
